import styles from './index.scss'
import { Button, TextareaItem, Switch, List, Picker, DatePicker } from 'antd-mobile'
import { Form } from 'antd'
import { district } from 'antd-mobile-demo-data'
import TipModal from '../Modal'
const FormItem = Form.Item
const InfoForm = ({
  form: { getFieldDecorator, validateFields, getFieldProps, getFieldValue },
  listData,
  next,
  infoType,
  modalControl,
  closeModal,
  showModal,
  content
}) => {
  // 定义modal需要的数据
  const modalData = {
    modalControl,
    closeModal,
    content,
    title: '温馨提示'
  }
  const showList = listData.map((item, index) => {
    // 判断是否是switch
    if (item.type && item.type === 'switch') {
      // 判断是否是switch 下面的pick
      if (item.children.type === 'pickAddress') {
        return (
          <div key={index}>
            <FormItem
              style={{ background: 'white', marginBottom: '0px' }}
              className={item.className}
            >
              <List.Item
                extra={
                  <Switch
                    {...getFieldProps(item.value, {
                      initialValue: item.initValue,
                      valuePropName: 'checked'
                    })}
                    color="#2579D4"
                  />
                }
              >
                {item.label}
              </List.Item>
              {getFieldValue(item.value) === false ? (
                <div>
                  <Picker
                    data={district}
                    {...getFieldProps(item.children.value, {
                      rules: [
                        {
                          required:item.children.require,
                          message: `${item.children.label}不能为空`
                        }
                      ]
                    })}
                    onOk={e => console.log(getFieldValue(e))}
                    okText="完成"
                    extra={`请选择${item.children.label}`}
                  >
                    <List.Item
                      arrow="horizontal"
                      className="noFont"
                      onClick={() => console.log(12313)}
                    >
                    </List.Item>
                  </Picker>
                </div>
              ) : null}
            </FormItem>
            {
              getFieldValue(item.value) === false ? 
              <FormItem
              style={{ background: 'white', marginBottom: '0px', marginTop:'0px' }}
              className={item.className}
            >
              {getFieldDecorator(item.children.areaValue, {
                rules: [
                  { required: item.children.require, message: `请输入${item.children.areaLabel}` },
                  { pattern: item.children.rule, message: `请输入正确的${item.children.areaLabel}` }
                ],
              })(
                <TextareaItem
                  disabled={item.disabled}
                  placeholder={item.children.areaPlaceholder}
                  autoHeight
                />
              )}
            </FormItem> : null
            }
            
          </div>
        )
      } else {
        // switch 下面的输入框
        return (
          <FormItem
            style={{ background: 'white', marginBottom: '0px' }}
            className={item.className}
            key={index}
          >
            <List.Item
              extra={
                <Switch
                  {...getFieldProps(item.value, {
                    initialValue: item.initValue,
                    valuePropName: 'checked'
                  })}
                  color="#2579D4"
                />
              }
            >
              {item.label}
            </List.Item>
            {getFieldValue(item.value) === false ? (
              <List.Item className="noPadding">
                <TextareaItem
                  placeholder={item.children.placeholder}
                  autoHeight
                  {...getFieldProps(item.children.value, {
                    rules: [
                      {
                        required: item.children.require,
                        message: `${item.children.label}不能为空`
                      }
                    ],
                    initialValue: item.children.initValue
                  })}
                />
              </List.Item>
            ) : null}
          </FormItem>
        )
      }
    } else if (item.type === 'pick') {
      // 判断是否是pick选择
      return (
        <div key={index} className={item.className}>
          <Picker
            data={item.data}
            cols={1}
            {...getFieldProps(item.value,{
              rules:[
                {
                  required:item.require,
                  message: `${item.label}不能为空`
                }
              ]
             })
            }
            onOk={e => console.log(e)}
            okText="完成"
            extra={`请选择${item.label}`}
          >
            <List.Item arrow="horizontal">{item.label+ ':'}</List.Item>
          </Picker>
        </div>
      )
    } else if (item.type === 'doublePick') {
      // 判断是否是pick选择
      return (
        <div key={index} className={styles.doublePick}>
          <div className={styles.dateTitle}>有效期</div>
          <div className={styles.itemContain}>
            <div className={styles.item}>
              <DatePicker
                mode="date"
                title="请选择开始时间"
                extra="Optional"
                okText="确定"
                dismissText="取消"
                {...getFieldProps(item.startTime.value, {
                  initialValue: item.startTime.time
                })}
              >
                <List.Item></List.Item>
              </DatePicker>
            </div>
            <div className={styles.itemLine}>至</div>
            <div className={styles.item}>
              <DatePicker
                mode="date"
                title="请选择结束时间"
                extra="Optional"
                okText="确定"
                dismissText="取消"
                {...getFieldProps(item.endTime.value, {
                  initialValue: item.endTime.time
                })}
              >
                <List.Item></List.Item>
              </DatePicker>
            </div>
          </div>
        </div>
      )
    }
     else {
      return (
        <FormItem
          style={{ background: 'white', marginBottom: '0px' }}
          key={index}
          className={item.className}
        >
          {getFieldDecorator(item.value, {
            rules: [
              { required: item.require, message: `请输入${item.label}` },
              { pattern: item.rule, message: `请输入正确的${item.label}` }
            ],
            initialValue: item.initValue
          })(
            <TextareaItem
              disabled={item.disabled}
              title={`${item.label}:`}
              placeholder={`请输入${item.label}`}
              autoHeight
            />
          )}
        </FormItem>
      )
    }
  })
  const submit = () => {
    validateFields((error, value) => {
      if (!error) {
        console.log(JSON.stringify(value))
        next()
      } else {
        // 报错信息判断是哪个具体字段报错 遍历listData 一旦查找到具体的报错信息 则抛出异常
        // 跳出循环 执行showModal
        try {
          listData.map(item => {
            if (error[item.value]) {
              showModal(error[item.value].errors[0].message)
              throw error[item.value]
            } else if (item.children && error[item.children.value]) {
              showModal(error[item.children.value].errors[0].message)
              throw error[item.children.value]
            } else if (item.children && error[item.children.areaValue]) {
              showModal(error[item.children.areaValue].errors[0].message)
              throw error[item.children.areaValue]
            }
             else {
              return 1
            }
          })
        } catch (e) {
          console.log(e)
        }
      }
    })
  }
  return (
    <div className={styles.infoContainer}>
      {
        infoType === 'change' ? null : 
        <div className={styles.tipInfo}>请确认您的个人信息,若有误请手动修改</div>
      }
      <div className={styles.formContainer}>
        <Form>
          {showList}
          <FormItem>
            <Button type="primary" onClick={submit}>
              {
                infoType === 'change' ? '保存' : '确定'
              }
            </Button>
          </FormItem>
        </Form>
      </div>
      <TipModal {...modalData}></TipModal>
    </div>
  )
}

export default Form.create()(InfoForm)
